<div class="page-header">
  <h1 class="rt-h1">Probes</h1>
	<a class="btn btn-success" href="plugins/raintank-worldping-app/page/probe-create" ng-show="ctrl.isOrgAdmin">
    <i class="fa fa-plus"></i>
    New Probe
  </a>
</div>

  <div ng-if="!ctrl.pageReady" class="rt-loading-message-container">
    <div class="rt-loading-message-inside">
      <img class="rt-loading-pulse" src="public/plugins/raintank-worldping-app/img/loading-pulse.svg" style="margin-bottom: 10px;">
      <p class="rt-loading-msg-1">Ground Control to Major Tom</p>
      <p class="rt-loading-msg-2">This is taking longer than expected.</p>
      <p class="rt-loading-msg-3">We apologize, something may be up. Please contact us if this continues to happen.</p>
    </div>
  </div>

  <div ng-if="ctrl.pageReady">
    <div class="editor-row">

      <div class="gf-form">
        <span class="gf-form-label width-6">Filter by:</span>
        <div class="gf-form-select-wrapper">
          <select class="gf-form-input gf-size-auto" ng-model="ctrl.filter.tag">
            <option value="" label="All tags">All Tags</option>
            <option ng-repeat="t in ctrl.probeTags()" value="{{t}}" label="{{t}}">{{t}}</option>
          </select>
        </div>
        <div class="gf-form-select-wrapper">
          <select class="gf-form-input gf-size-auto" ng-model="ctrl.filter.status" ng-options="opt.value as opt.label for opt in ctrl.statuses track by opt.id">
            <option value="" label="All statuses">All Statuses</option>
          </select>
        </div>
      </div>

      <div class="rt-list-showing-header">
        <div class="rt-list-status">
          <span class="small">Showing</span>
          <span class="rt-list-status-up">{{(ctrl.probes|filterByTag:ctrl.filter.tag|filter:{enabled:true, online:true}).length}} ONLINE</span> |
          <span class="rt-list-status-disabled">{{(ctrl.probes|filterByTag:ctrl.filter.tag|filter:{enabled:true, online:false}).length}} OFFLINE</span> |
            <span class="rt-list-status-disabled">{{(ctrl.probes|filterByTag:ctrl.filter.tag|filter:{enabled:false}).length}} DISABLED</span>
            <span class="small"> of <span class="rt-list-links" ng-click="setProbeFilter('')">{{(ctrl.probes|filterByTag:ctrl.filter.tag).length}} total.</span>
        </div>
        <div class="editor-option" style="float: right;">
<!--        <span class="small">Sorted By:</span>
          <select class="input-medium rt-select-dropdown small" ng-model="sort_field" ng-options="field for field in ['name']" style="">
          </select>  -->
        </div>
      </div>
    </div>
  </div>

  <section class="card-section" layout-mode>
    <layout-selector></layout-selector>

    <div ng-if="ctrl.probes.length === 0">
      <em>No probes found</em>
    </div>
    <ol class="card-list" >
      <li class="card-item-wrapper" ng-repeat="probe in ctrl.probes | filterByTag:ctrl.filter.tag | filter:ctrl.statusFilter() | orderBy:ctrl.sort_field">
        <a class="card-item" ng-href="{{ctrl.isOrgAdmin ? 'plugins/raintank-worldping-app/page/probe-details?probe='+probe.id : ''}}">
          <div class="card-item-header">
            <span class="rt-list-collector-status-{{probe.online?'online':'offline'}}">{{probe.online?"ONLINE":"OFFLINE"}}</span>
          </div>
          <div class="card-item-body">
            <div class="card-item-details">
              <div class="card-item-name">
                {{probe.name}}
                <span style="vertical-align: 2px;"><img src="public/plugins/raintank-worldping-app/img/raintank_icn.svg" width="15px" height="15px" ng-if="probe.public == 1" style="margin-right: 5px;" bs-tooltip="'raintank Public Probe'"></img></span>
                <span style="vertical-align: 2px;"><img src="public/plugins/raintank-worldping-app/img/rt-private_collector.svg" width="15px" height="15px" ng-if="probe.public == 0" style="margin-right: 5px;" bs-tooltip="'Private Probe'"></img></span>
                <span ng-repeat="tag in probe.tags" tag-color-from-name="tag"  class="label label-tag">
                  {{tag}}
                </span>
              </div>
            </div>
          </div>
        </a>
      </li>
    </ol>
  </section>
</div>
